<template>
  <div class="device-defect">
    <div class="breadcrumb-container">
      <!-- Breadcrumb 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>缺陷管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <h1 class="title">缺陷管理</h1>
    </div>

    <!-- 查询条件部分 -->
    <el-form :model="query" class="query-form" inline>
      <!-- 查询条件输入框 -->
      <el-form-item label="设备编码">
        <el-input v-model="query.equipmentId"></el-input>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input v-model="query.equipmentName"></el-input>
      </el-form-item>
      <el-form-item label="设备状态">
        <el-radio-group v-model="query.state">
          <el-radio-button label="待提交"></el-radio-button>
          <el-radio-button label="待处理"></el-radio-button>
          <el-radio-button label="待审核"></el-radio-button>
          <el-radio-button label="待验收"></el-radio-button>
          <el-radio-button label="待实施"></el-radio-button>
          <el-radio-button label="待激活"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item>
        <el-select v-model="query.isClosed" placeholder="是否关闭">
          <el-option v-for="item in isClosed" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="query.phenomenon" placeholder="缺陷现象">
          <el-option v-for="item in phenomenon" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="query.equipmentMajor" placeholder="专业">
          <el-option v-for="item in equipmentMajor" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="缺陷内容">
        <el-input v-model="query.content"></el-input>
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="danger" @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="m1">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 查询结果部分 -->
    <div class="result-container">
      <h2 class="result-title">查询结果</h2>
      <el-table :data="list" style="width: 100%" @row-click="goToDetail">
        <!-- 表格列定义 -->
        <el-table-column prop="id" label="缺陷编码"></el-table-column>
        <el-table-column prop="equipmentId" label="设备编码"></el-table-column>
        <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
        <el-table-column prop="updateTime" label="报修时间"></el-table-column>
        <el-table-column prop="phenomenon" label="现象"></el-table-column>
        <el-table-column prop="equipmentMajor" label="专业"></el-table-column>
        <el-table-column v-if="checkPermission()" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click.stop="deleteItem(scope.$index, scope.row)">
              删除
            </el-button>
            <el-select v-model="scope.row.state" placeholder="请选择状态" style="width: 100px; margin-right: 10px;"
              @change="changeStatus(scope.row)">
              <el-option label="待提交" value="dtj"></el-option>
              <el-option label="待处理" value="dcl"></el-option>
              <el-option label="待审核" value="dsh"></el-option>
              <el-option label="待验收" value="dys"></el-option>
            </el-select>

          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination :current-page.sync="query.page" :page-size="query.size" :total="count"
          layout="total, prev, pager, next" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "DeviceDefect",
  data() {
    return {
      allData: [],        // 所有数据
      count: 0,       //总记录数
      query: {
        equipmentId: "",
        equipmentName: "",
        state: "",
        updateTime: "",
        isClosed: "",
        phenomenon: "",
        equipmentMajor: "",
        content: "",
        page: 1,
        size: 5
      },
      list: [
        // 省略设备数据
      ],
      isClosed: [
        {
          value: 'true',
          label: '是'
        }, {
          value: 'false',
          label: '否'
        }
      ],
      equipmentMajor: [
        {
          value: '电气',
          label: '电气'
        }, {
          value: '化学',
          label: '化学'
        }, {
          value: '除灰',
          label: '除灰'
        },
        {
          value: '燃料',
          label: '燃料'
        }
      ],
      phenomenon: [
        {
          value: '1',
          label: '一级缺陷'
        }, {
          value: '2',
          label: '二级缺陷'
        }, {
          value: '3',
          label: '三级缺陷'
        },
        {
          value: '4',
          label: '四级缺陷'
        }
      ],
    };
  },
  mounted() {
    this.list = [];
    this.m1()
  },
  methods: {
    checkPermission() {
      let user = localStorage.getItem('user');
      
      if (user) {
        let userObj = JSON.parse(user);
        let permission = userObj.permission;

        // 核查权限是否为 'admin1'
        if (permission === 'admin1'||permission === 'superuser') {
          
          console.log('User has admin1 permission');
          return true;
        } else {

          console.log('User does not have admin1 permission');
          return false;
        }
      }
      
    },
    changeStatus(row) {
      axios.post('http://localhost:9527/defect/update', {
        id: row.id, // row.id 应该是记录的唯一标识
        state: row.state
      });
    },
    handleCurrentChange(val) {
      //当前页面改变时触发
      this.query.page = val;
      this.m1();
      console.log(`当前页: ${val}`);
      console.log(this.query.page);
      console.log(this.query);
    },
    goToDetail(row) {
      // 注意，在这个例子里，我们假设你的数据有一个唯一识别的字段名为 'id'。实际数据可能会不同。
      this.$router.push({ name: 'DefectDetail', params: { id: row.id } })
    },
    deleteItem(index, row) {
      this.$confirm('此操作将永久删除该条目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`http://localhost:9527/defect/deleteDefect/${row.id}`)
          .then((response) => {
            if (response.status === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.list.splice(index, 1);   //这个可选，如果你希望在删除之后立刻从界面上移除
              this.m1();                     //重新获取列表数据
            }
          })
          .catch(error => {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
            console.error("请求出错", error);
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    m1() {
      let requestBody = { ...this.query };
      delete requestBody.page;
      delete requestBody.size;

      for (let prop in requestBody) {
        if (requestBody[prop] === "" || requestBody[prop] === null || requestBody[prop] === undefined) {
          // If the property is empty, delete it from the request body
          delete requestBody[prop];
        }
      }

      let requestParams = {
        page: this.query.page,
        size: this.query.size
      };

      axios.post("http://localhost:9527/defect/page-search", requestBody, {
        params: requestParams
      })
        .then(data => {
          this.list = data.data.data.records;
          this.count = data.data.data.total;
          console.log(data);
        })
        .catch(error => {
          console.error("post请求出错", error)
        });
    },


    resetQuery() {
      // 重置查询条件
      this.query = {
        equipmentId: "",
        equipmentName: "",
        state: "",
        updateTime: "",
        isClosed: "",
        phenomenon: "",
        equipmentMajor: "",
        content: "",
        page: 1,
        size: 5
      };
    }
  },
};


</script>

<style scoped>
.device-defect {
  padding: 20px;
}

.breadcrumb-container {
  margin-bottom: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  margin: 0;
}

.query-form {
  margin-bottom: 20px;
}

.result-container {
  margin-top: 20px;
}

.result-title {
  font-size: 20px;
  margin-bottom: 10px;
}

/* 可以继续添加其他样式来自定义界面 */
</style>
